body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    /* background-color: #f0f0f0; */ /* Remove plain background */
    font-family: sans-serif;
    overflow: hidden; /* Keep hidden to prevent scrollbars from potential overflow */

    /* --- Galaxy Background --- */
    background-color: #000; /* Base black */
    background-image:
        /* Layer 1: Tiny stars */
        radial-gradient(1px 1px at 20px 30px, #eee, rgba(0,0,0,0)),
        radial-gradient(1px 1px at 40px 70px, #fff, rgba(0,0,0,0)),
        radial-gradient(1px 1px at 50px 160px, #ddd, rgba(0,0,0,0)),
        radial-gradient(1.5px 1.5px at 90px 40px, #fff, rgba(0,0,0,0)),
        radial-gradient(1px 1px at 130px 80px, #fff, rgba(0,0,0,0)),
        radial-gradient(1.5px 1.5px at 160px 120px, #ddd, rgba(0,0,0,0)),
        /* Layer 2: More tiny stars */
        radial-gradient(1px 1px at 220px 230px, #eee, rgba(0,0,0,0)),
        radial-gradient(1px 1px at 240px 270px, #fff, rgba(0,0,0,0)),
        radial-gradient(1px 1px at 250px 360px, #ddd, rgba(0,0,0,0)),
        radial-gradient(1.5px 1.5px at 290px 240px, #fff, rgba(0,0,0,0)),
        radial-gradient(1px 1px at 330px 280px, #fff, rgba(0,0,0,0)),
        radial-gradient(1.5px 1.5px at 360px 320px, #ddd, rgba(0,0,0,0)),
        /* Layer 3: Nebula clouds */
        radial-gradient(ellipse at center, rgba(50, 0, 100, 0.4) 0%, rgba(0,0,0,0) 60%), /* Purple */
        radial-gradient(ellipse at 20% 80%, rgba(0, 50, 100, 0.3) 0%, rgba(0,0,0,0) 50%), /* Blue */
        radial-gradient(ellipse at 80% 30%, rgba(100, 0, 50, 0.3) 0%, rgba(0,0,0,0) 50%); /* Pink/Red */

    background-repeat: repeat; /* Repeat star patterns */
    background-size:
        /* Star layers size (make them tile) */
        200px 200px,
        200px 200px,
        /* Nebula layers size (cover viewport) */
        100% 100%,
        100% 100%,
        100% 100%;
    background-position:
        /* Offset star layers slightly */
        0 0,
        100px 100px, /* Offset second star layer */
        /* Nebula positions */
        center center,
        20% 80%,
        80% 30%;
    animation: stars-twinkle 15s linear infinite, nebula-shift 60s ease-in-out infinite;
    /* --- End Galaxy Background --- */
}

.instructions {
    margin-bottom: 20px;
    font-size: 1.2em;
    /* color: #333; */ /* Change color for dark background */
    color: #eee; /* Light color for visibility */
    text-shadow: 0 0 5px #000; /* Add slight shadow for readability */
}

.magic-8-ball-container {
    cursor: pointer;
    perspective: 1000px; /* For potential 3D effects */
    /* Add the blue aura effect */
    filter: drop-shadow(0 0 20px rgba(173, 216, 230, 0.7)); /* Light blue glow */
}

#magic-8-ball {
    display: block;
    transition: transform 0.1s ease-out;
}

#magic-8-ball.shake {
    animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both;
}

#answer-window polygon {
    transition: opacity 0.3s ease-in-out;
    /* Add a subtle glow effect to the triangle */
    filter: drop-shadow(0 0 3px rgba(50, 100, 200, 0.6));
}

#answer-text {
    transition: opacity 0.3s ease-in-out;
}

#answer-window polygon.visible,
#answer-text.visible {
    opacity: 1;
}

@keyframes shake {
  10%, 90% {
    transform: translate3d(-1px, 0, 0);
  }

  20%, 80% {
    transform: translate3d(2px, 0, 0);
  }

  30%, 50%, 70% {
    transform: translate3d(-4px, 0, 0);
  }

  40%, 60% {
    transform: translate3d(4px, 0, 0);
  }
}

/* --- Galaxy Animations --- */
@keyframes stars-twinkle {
    0% { background-position: 0 0, 100px 100px, center center, 20% 80%, 80% 30%; }
    50% { background-position: 5px 5px, 95px 95px, center center, 20% 80%, 80% 30%; } /* Slight shift */
   100% { background-position: 0 0, 100px 100px, center center, 20% 80%, 80% 30%; } /* Return */
    /* Note: Opacity changes are hard with multiple backgrounds. Position shift gives a subtle effect. */
}

@keyframes nebula-shift {
    0% {
        background-position:
            0 0, 100px 100px,
            center center, 20% 80%, 80% 30%;
    }
    50% {
         background-position:
            5px 5px, 95px 95px,
            center center, 25% 75%, 75% 35%; /* Shift nebula positions */
    }
    100% {
        background-position:
            0 0, 100px 100px,
            center center, 20% 80%, 80% 30%; /* Return to original */
    }
}
/* --- End Galaxy Animations --- */